<template>
	<view class="xingzu_padding">
		<!-- <z-paging :use-page-scroll="true" ref="paging" v-model="dataList" @query="queryList"> -->
		<scroll-list ref="list" v-if="show" :option="option" @load="load" @refresh="refresh">
			<view class="item_box" v-for="(item, index) in dataList" :key="index" @click="handleDetails(item.id)">
				<view>
					<image :src="item.cover" class="item_box_image"></image>
				</view>
				<view class="item_box_title">
					<span class="title_color">{{ item.title }}</span>
				</view>
				<view class="item_box_content">
					<span class="content_color">{{ item.description }}</span>
				</view>
			</view>
		</scroll-list>
		<!-- </z-paging> -->
	</view>
</template>

<script>
import { getIndexListByName } from '@/pages/users/xingzu/config/api.js'

export default {
	props: {
		name: Number,
		title: String
	},
	watch: {
		name(newVal, oldVal) {
			this.tabName = newVal
			if(this.tabName !== null){
				this.show = true
				this.getList(1, 10, true)
			}
		},
		title(newVal, oldVal) {
			this.getList(1, 10, true)
		}
	},
	beforeDestroy() {
		this.show = false
	},
	data() {
		return {
			tabName: null,
			show: false,
			option: {
				size: 10,
				auto: true,
				offsetBottom: 120,
				safeArea: true
			},
			dataList: [],
		}
	},
	methods: {
		getList(pageNo, pageSize, isRefresh) {
			const params = {
				id: this.tabName,
				page: pageNo,
				limit: pageSize,
				title: this.title
			}
			getIndexListByName(params).then(res => {
				if(pageNo === 1) {
					this.dataList = []
				}
				res.data.list.forEach(item => {
					this.dataList.push(item)
				})
				// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
				this.$refs.list.loadSuccess({ list: this.dataList, total: res.data.total });
			}).catch(err => {
				this.$refs.list.refreshFail()
				// 刷新失败
				// this.$refs.list.refreshFail()
			})
		},
		handleDetails(id) {
			uni.navigateTo({
				url: '/pages/users/xingzu/menu?id='+id
			})
		},
		load(paging) {
			this.getList(paging.page, paging.size, false)
		},
		refresh(paging) {
			this.getList(paging.page, paging.size, true)
			this.$refs.list.refreshSuccess({ list: this.dataList, total: 10 });
		}
	}
}
</script>

<style scoped>
.xingzu_padding {
	padding: 4px 16px;
}
.item_box {
	border-radius: 8px;
	width: 104%;
	margin-left: -2%;
	margin-top: 12px;
	background-color: #FFFFFF;
}
.item_box_image {
	width: 96%;
	margin-left: 2%;
	height: 200px;
	border-radius: 8px 8px 0px 0px;
}
.item_box_title {
	font-size: 14px;
	color: #1A1A1A;
	padding: 5px 12px;
}
.item_box_content {
	font-size: 14px;
	padding: 0 12px 10px 12px;
}
.content_color {
	font-size: 14px;
	color: #808080;
}
.title_color {
	font-weight: bold;
}
</style>